<script setup>
    import { ref } from 'vue';
    

    const titleList = ref([
        {id:1,num:"01",text:"【麻城市中心】麻城经济开发区谭家岗小学建设项目招标预公告",time:"2022-04-13",state:0},
        {id:2,num:"02",text:"【麻城市中心】麻城市农村公路管理局招标计划",time:"2022-04-13",state:0},
        {id:3,num:"03",text:"【麻城市中心】麻城经济开发区谭家岗小学及附属幼儿园建设项目招标预公告",time:"2022-04-13",state:0},
        {id:4,num:"04",text:"【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程",time:"2022-04-13",state:0},
        {id:5,num:"05",text:"【红安市中心】红安县2023年度小型水库安全监测项目设计采购施工总承包（EPC）",time:"2022-04-13",state:0},
        {id:6,num:"06",text:"海头镇宅基地土地发包项目",time:"2022-04-13",state:0},
        {id:7,num:"07",text:"先锋创业大楼（515-1室）60㎡",time:"2022-04-13",state:0},
        {id:8,num:"08",text:"万达开绿色智能铸造产业园项目（二期）比选结果公告",time:"2022-04-13"},
        {id:9,num:"09",text:"2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告",time:"2022-04-13"},
        {id:10,num:"10",text:"万达开绿色智能铸造产业园项目（三期）比选结果公告",time:"2022-04-13"},
        {id:11,num:"11",text:"太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目",time:"2022-04-13"},
        {id:12,num:"12",text:"侯马市第二中学2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金",time:"2022-04-13"},
        {id:13,num:"13",text:"太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目",time:"2022-04-13"},
        {id:14,num:"14",text:"侯马市第二中学2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金",time:"2022-04-13"},
        {id:15,num:"15",text:"【次氯酸钠贮存罐管理】采购公告 附件",time:"2022-04-13"}
    ]);

    function addValue() {
        if (form.value.title == '' || form.value.content == '' || form.value.name == '' || form.value.phone == '') {
            alert("请填写完整信息");
            return;
        }else{
        titleList.value.push({
            id: titleList.value.length+1,
            num: titleList.value.length+1,
            text: form.value.title,
            time: "2022-04-13",
            state: 0
        });
        form.value = {
            title: '',
            content: '',
            name: '',
            phone: ''
        };
        alert("提交成功");
        addComplaints.value = false;
        }
    }

    const addComplaints = ref(false)
    const form = ref({
        title:"",
        content:"",
        name:"",
        phone:""
    })
    function closeDialog() {
        form.value = {
        title: '',
        content: '',
        name: '',
        phone: ''
        };
        addComplaints.value=false;
    }
</script>
<template>
    <el-container style="background-color:rgb(250,250,250)">
        <el-header style="display:flex;justify-content:space-between;">
            <div style="display:flex;margin-left:4%;">
                <p style="color:rgb(154,154,154)">首页/</p>
                <p>违规投诉</p>
            </div>
            <div>
                <button style="height:60%;width:130px;margin-top:10px;margin-right:35px;background:linear-gradient(to right,rgb(60,219,148),rgb(27,197,168));border:none;color:white;border-radius:8px" @click="addComplaints=true">
                    去投诉
                </button>
            </div>
        </el-header>
        <el-main style="background-color:white;width:90%;margin:auto;">
            <ul style="list-style:none">
                <li>
                    <el-row style="background-color:rgb(246,253,253)">
                        <el-col :span="2" ><p style="margin-left:20px">序号</p></el-col>
                        <el-col :span="13" ><p>违规投诉标题</p></el-col>
                        <el-col :span="3" style="display:flex;;"><p style="margin-left:30px;">发布时间</p><img src="/images/pic2.png" style="width:15px;height:15px;margin-left:20px;margin-top:20px"></el-col>
                        <el-col :span="3"><p style="text-align:center;">处理状态</p></el-col>
                        <el-col :span="3"><p style="text-align:center;">操作</p></el-col>
                    </el-row>
                </li>
                <li v-for="item in titleList" :key="item.id">
                    <el-row style="border-bottom:1px solid rgb(154,154,154)">
                        <el-col :span="2"><p style="margin-left:20px;margin-top:15px">{{item.num}}</p></el-col>
                        <el-col :span="13">
                            <a style="text-decoration:none;color:black">
                                <p>{{item.text}}</p>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <p style="color:rgb(154,154,154);margin-left:30px;">{{item.time}}</p>
                        </el-col>
                        <el-col :span="3">
                            <p v-if="item.state==0" style="margin-left:48px;color:rgb(245,155,37)">正在处理中</p>
                            <p v-else  style="margin-left:48px;">处理完成</p>
                        </el-col>
                        <el-col :span="3">
                            <router-link to="/cdetail" style="text-decoration: none; color:black;">
                            <p style="margin-left:63px;color:rgb(29,195,172);">查看</p>
                            </router-link>
                        </el-col>
                    </el-row>
                </li>
            </ul>
            <el-dialog v-model="addComplaints" title="创建投诉" width="40%">
                <el-form ref="formRef" :model="form" label-width="auto">
                    <el-form-item label="投诉标题" required>
                        <el-input  placeholder="请输入投诉标题" id="title" v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="投诉内容" required>
                        <el-input type="textarea" placeholder="请输入投诉内容" id="content" v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" required>
                        <el-input placeholder="请输入联系人" id="name" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" required>
                        <el-input placeholder="请输入联系电话" id="phone" v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:70%;margin-top:60px">
                        <el-button @click="closeDialog">取消</el-button>
                        <el-button type="primary" @click="addValue" style="background:linear-gradient(to right,rgb(60,219,148),rgb(27,197,168));">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-main>
        
    </el-container>
</template>